/**
 * Created by Ysssssss on 2021/5/27.
 */
import React, {forwardRef, useState, useEffect, useCallback, useContext} from 'react'
import CustomizeModal, {CustomizeModalContext} from "@common/presentational/CustomizeModal";
import {useSelector} from "react-redux";
import {PLATFORM_MAP} from "@constants/PlatformList";
import { Tabs, Button } from "antd";
import downloadImg from "@utils/ImageDownload";


const MiniCodeContent = props => {
    const { params } = useContext(CustomizeModalContext)
    const { codeKey } = params
    const { customizeMiniCode } = useSelector(state => state.thirdparty)
    const miniCode = customizeMiniCode[codeKey]


    return miniCode ? (
        <Tabs className="mini-program-code-content" type="card">
            <Tabs.TabPane tab="微信小程序" key="1">
                {
                    miniCode[PLATFORM_MAP.wechat] ? (
                        <>
                            <div className="qr-code-box">
                                <img className="qr-code" src={ miniCode[PLATFORM_MAP.wechat] } alt=""/>
                            </div>
                            <div className="qr-code-remark">使用微信扫码访问</div>
                            <Button className="download-button"
                                    type="primary"
                                    onClick={downloadImg.bind(this, miniCode[PLATFORM_MAP.wechat], "微信小程序码")}
                            >下载小程序码</Button>
                        </>
                    ) : (
                        <div className="coming-soon">
                            <img src={require('@assets/image/no-code-platform-not-publish.png')} alt=""/>
                            <br />
                            <span>未发布微信小程序</span>
                        </div>
                    )
                }
            </Tabs.TabPane>
            <Tabs.TabPane tab="支付宝小程序" key="2">
                {
                    miniCode[PLATFORM_MAP.alipay] ? (
                        <>
                            <div className="qr-code-box">
                                <img className="qr-code" src={ miniCode[PLATFORM_MAP.alipay] } alt=""/>
                            </div>
                            <div className="qr-code-remark">使用支付宝扫码访问</div>
                            <Button className="download-button"
                                    type="primary"
                                    onClick={downloadImg.bind(this, miniCode[PLATFORM_MAP.alipay], "支付宝小程序码")}
                            >下载小程序码</Button>
                        </>
                    ) : (
                        <div className="coming-soon">
                            <img src={require('@assets/image/no-code-platform-not-publish.png')} alt=""/>
                            <br />
                            <span>未创建支付宝小程序</span>
                        </div>
                    )
                }
            </Tabs.TabPane>
            <Tabs.TabPane tab="抖音小程序" key="3">
                {
                    miniCode[PLATFORM_MAP.bytedance] ? (
                        <>
                            <div className="qr-code-box">
                                <img className="qr-code" src={ miniCode[PLATFORM_MAP.bytedance] } alt=""/>
                            </div>
                            <div className="qr-code-remark">使用抖音扫码访问</div>
                            <Button className="download-button"
                                    type="primary"
                                    onClick={downloadImg.bind(this, miniCode[PLATFORM_MAP.bytedance], "抖音小程序码")}
                            >下载小程序码</Button>
                        </>
                    ) : (
                        <div className="coming-soon">
                            <img src={require('@assets/image/no-code-platform-not-publish.png')} alt=""/>
                            <br />
                            <span>未创建抖音小程序</span>
                        </div>
                    )
                }
            </Tabs.TabPane>
        </Tabs>
    ) : null
}

export const MiniCodeModal = forwardRef(({ title = '小程序码', ...props }, ref) => {
    return (
        <CustomizeModal title={title} className="mini-program-code-modal" width={640} ref={ref}>
            <MiniCodeContent {...props}/>
        </CustomizeModal>
    )
})